<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chinamap_merge</title>
    <script type="text/javascript" src="../lib/d3.js"></script>
    <script type="text/javascript" src="../lib/topojson.js"></script>
</head>
<body>
<script type="text/javascript">

    var width = 1000;
    var height = 1000;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(0,0)");

    //地图投影
    var projection = d3.geo.mercator()
        .center([107, 31])
        .scale(850)
        .translate([width / 2, height / 2]);

    //地图路径生成器
    var path = d3.geo.path().projection(projection);

    var color = d3.scale.category20();


    d3.json("../geojson/china.topojson", function (error, toporoot) {
        if(error)
            return console.log(error);

        //调用topojson.merge将TopoJSON格式的对象(topojson)，转换成GeoJSON格式的对象(georoot)

        //东南各省名称的集合，放入d3.set中
        var southeast = d3.set([
            "广东", "海南", "福建", "浙江", "江西",
            "江苏", "台湾", "上海", "香港", "澳门"
        ]);
        //所有省份
        var georoot = topojson.feature(toporoot,toporoot.objects.china);
        //合并东南各省
        var mergePolygon = topojson.merge(toporoot, toporoot.objects.china.geometries
            .filter(function (d) {
                return southeast.has(d.properties.name);
            }
        ));

        //先不绘制选中的那几块
        svg.selectAll("path")
            .data(georoot.features.filter(function(d){
                return !southeast.has(d.properties.name);
            }))
            .enter()
            .append("path")
            .attr("class","province")
            .style("fill","#ccc")
            .attr("d",path);

        //绘制东南各省
        svg.append("path")
            .datum(mergePolygon)
            .attr("class","province")
            .style("fill","blue")
            .attr("d",path);

    });

</script>

</body>
</html>